<template>
    <view class="container" :style="themeColor">
        <view class="order-item-box">
            <uni-load-more status="loading" v-if="isLoading"></uni-load-more>
            <view v-else>
                <view class="item">
                    <view class="order-detail-item" v-for="item in data">
                        <image
                            v-show="!getAppSet().isOneSpec"
                            class="product-img"
                            mode="aspectFit"
                            :src="
                                item.ProductImage ? easyGetImgUrl(item.ProductImage) : '/static/img/no-img.jpg'
                            "></image>
                        <view class="product-info">
                            <view class="product-name"
                                ><text>{{ item.ProductName }}</text
                                ><text class="product-price">￥{{ item.OrgPrice }}</text></view
                            >
                            <view class="product-bottom">
                                <text class="product-desc">{{ item.Attribute ? item.Attribute : "" }}</text>
                                <text class="product-num"
                                    >x{{ item.Number }}{{ item.UnitName ? item.UnitName : item.RationUnit }}</text
                                >
                            </view>
                        </view>
                    </view>
                </view>

                <view class="bottom" @click="easyGoHome">
                    <view class="num">种类：{{ otherData.ClassNumber }} 数量：{{ otherData.TotalNumber }}</view>
                    <view class="pay-price">
                        <text>总计:</text>
                        <text class="pay-price-text">￥{{ otherData.OrgPriceSum }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { GetRefundOrderDetail } from "@/service/api/exChange.js"
export default {
    components: {},
    data() {
        return {
            id: 0,
            data: {},
            otherData: {},
            isLoading: false,
        }
    },
    onLoad(e) {
        this.id = e.id
    },
    mounted() {
        this.getDetail()
    },
    methods: {
        getDetail() {
            let param = {
                id: this.id,
            }
            this.isLoading = true
            GetRefundOrderDetail(param).then((res) => {
                this.data = res.Data
                this.otherData = res.OtherData
                this.isLoading = false
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.container {
    padding: $app-page-padding;
    .item {
        padding: $app-page-padding $app-page-padding 0;
    }
    .bottom {
        padding-left: $app-page-padding;
        display: flex;
        flex-direction: row;
        border-top: solid 1rpx $uni-bg-color-grey;
        align-items: center;
        .num {
            display: flex;
            flex: 1;
            align-items: center;
        }
    }
    .order-detail-item {
        display: flex;
        flex-direction: row;
        margin-bottom: 30rpx;
        .product-img {
            width: 120rpx;
            height: 120rpx;
            border-radius: $border-radius-10;
            margin-right: 15rpx;
        }
        .product-info {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
            .product-name {
                font-weight: 500;
                font-size: $font-size-26;
                color: $app-color-text-mian;
                margin-bottom: 6rpx;
                display: flex;
                justify-content: space-between;
            }
            .product-desc {
                font-size: $font-size-20;
                color: $app-color-text-tip;
                margin-bottom: 20rpx;
            }
            .product-bottom {
                display: flex;
                // flex-direction: row;
                justify-content: space-between;
                align-items: center;
                .product-name {
                    product-num: $font-size-24;
                    color: $color-black;
                }
            }
            .product-price {
                font-size: $font-size-28;
                color: $color-orange-1;
            }
        }
    }
}
</style>
